<template>
  <view>
    <!-- 地图 -->
    <map
      class="Map"
      v-if="Props.statusType == 1"
      :latitude="nowCoordinate.starLatitude"
      :longitude="nowCoordinate.starLongitude"
      :markers="covers"
      :show-location="true"
      @regionchange="mapChangeOver"
      :enable-3D="true"
      :enable-overlooking="true"
      :enable-traffic="true"
      layer-style="bule"
      id="IDMap"
      scale="18"
      @updated="mapUpdateOver"
    >
      <cover-view class="pos_a FUN" v-if="FunShow">
        <cover-view class="flex_al_cen_ju_bet">
          <cover-view class="bg Back">
            <cover-view>
              <cover-image
                @click="Back"
                src="../static/images/pulice/back.png"
              ></cover-image
            ></cover-view>
          </cover-view>
          <cover-view class="flex_al_cen_ju_bet">
            <!-- <mark-cover> </mark-cover> -->
            <cover-view class="bg kefu">
              <cover-image
                @click="makePhone"
                src="../static/images/pulice/kefu.png"
              ></cover-image>
              <cover-view>客服</cover-view>
            </cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
    </map>
    <map
      class="Map"
      v-else
      :latitude="nowCoordinate.starLatitude"
      :longitude="nowCoordinate.starLongitude"
      :markers="covers"
      :polyline="polyline"
      :show-location="true"
      @regionchange="mapChangeOver"
      :enable-3D="true"
      :enable-overlooking="true"
      :enable-traffic="true"
      layer-style="bule"
      id="IDMap"
      scale="18"
      @updated="mapUpdateOver"
    >
      <cover-view class="pos_a FUN" v-if="FunShow">
        <cover-view class="flex_al_cen_ju_bet">
          <cover-view class="bg Back">
            <cover-view>
              <cover-image
                @click="Back"
                src="../static/images/pulice/back.png"
              ></cover-image
            ></cover-view>
          </cover-view>
          <cover-view class="flex_al_cen_ju_bet">
            <cover-view class="bg kefu">
              <cover-image
                @click="makePhone"
                src="../static/images/pulice/kefu.png"
              ></cover-image>
              <cover-view>客服</cover-view>
            </cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
    </map>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>
<script setup lang="ts">
import { getCurrentInstance, defineProps, reactive } from "vue";
import { Back } from "../utlis/uni_api";
import { onLoad, onHide, onShow, onUnload } from "@dcloudio/uni-app";
import MapHere from "@/Hooks/Map/MapHere";
import { getLocation } from "@/utlis/uni_api";
const { proxy } = getCurrentInstance() as any;
const Props = defineProps<{
  FunShow: boolean;
  polylines: any;
  markCover: any;
  statusType: any;
}>();
const {
  nowCoordinate,
  makePhone,
  MarkLoaction,
  mapUpdateOver,
  timer,
  covers,
  phoneNumber,
  polyline,
  showData,
  mapChangeOver,
  baseData,
} = MapHere(Props, proxy);
onShow(() => {
  // 每次切换后台进来  都要重新获取一下定位信息 重新渲染骑手的位置
  getLocation().then((response: any) => {
    console.log(response, "response");
    if (response.latitude || response.longitude) {
      let locations = response.longitude + "," + response.latitude;
      // 转换坐标
      proxy
        .$API(proxy)
        .CoordinateTransformation(locations,true)
        .then((res: { longitude: string; latitude: string }) => {
          //console.log(res, "-------坐标转换-----");
          MarkLoaction.latitude = res.latitude;
          MarkLoaction.longitude = res.longitude;
          nowCoordinate.starLatitude = res.latitude;
          nowCoordinate.starLongitude = res.longitude;
          // 骑手当前位置
          let obj = {
            latitude: res.latitude,
            longitude: res.longitude,
            width: 70,
            height: 70,
            title: "",
            iconPath: "/static/images/pulice/ridermotuo.png",
          };
          covers[1] = obj;
          console.log(covers, "covers");
        });
      // 更新骑手位置
      if (!showData.drawLineShow) {
        showData.drawLineShow = true;
        // 更新骑手频率
        mapUpdateOver();
      }
    }
  });
});
onLoad((options: any) => {
  baseData.id = options.id;
  baseData.Type = options.Type; //待取货1 | 配送中2
  baseData.orderType = options.orderType; //外卖0 | 跑腿1
  // 取送地址
  covers[0].latitude = Props.markCover.terminalLatitude;
  covers[0].longitude = Props.markCover.terminalLongitude;
  // 客服电话
  phoneNumber(proxy);
});
// 切换后台
onHide(() => {
  console.log("切入后台");
  // 暂停骑手频率与详情接口
  showData.drawLineShow = false;
  clearTimeout(timer.value);
});
// 离开页面
onUnload(() => {
  // 暂停骑手频率与详情接口
  showData.drawLineShow = false;
  clearTimeout(timer.value);
});
</script>

<style scoped lang="scss">
.bg {
  background: #fff;
  padding: 7rpx;
  margin-right: 10rpx;
  font-size: 20rpx;
}

.kefu {
  padding: 15rpx 20rpx;
  margin-right: 30rpx;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(170, 170, 170, 0.2);
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  cover-image {
    margin: 0 auto 7rpx;
    width: 35rpx;
    height: 35rpx;
    z-index: 9999;
  }
}

.Map {
  width: 100%;
  height: 700rpx;
}

.Back {
  width: 60rpx;
  height: 77rpx;
  margin-left: 20rpx;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(170, 170, 170, 0.2);
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  background: #fff;
  text-align: center;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  cover-image {
    display: block;
    width: 23rpx;
    height: 41rpx;
    z-index: 9999;
  }
}

.FUN {
  top: 12%;
  width: 100%;
  z-index: 99999;
  text-align: center;
  > view {
    padding: 20rpx;
  }
}
</style>
